<template>
  <div class="business-container">
    <!-- 标题 -->
    <div class="title" flex-center mt-20 text-20>
      <h2>普测业务信息</h2>
    </div>

    <div class="business-list" m-20>
      <div
        class="business-card"
        v-for="item in testbusinessList"
        :key="item.testbusinessId"
        @click="goToBusinessDetail(item)"
      >
        <BusinessCard :data="item" mt-20></BusinessCard>
      </div>
    </div>
  </div>
</template>

<script setup>
import BusinessCard from "./components/BusinessCard.vue";
import { listTestbusiness } from "@/api/system/testbusiness";
import { onMounted } from "vue";
import { useRouter } from "vue-router";
import usePsyBusinessStore from "../../../store/psy/psyBusiness";

const $router = useRouter();

const psyBusinessStore = usePsyBusinessStore();

const testbusinessList = ref([]);
const loading = ref(true);
const total = ref(0);
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    schoolName: null,
    requestDate: null,
    description: null,
    status: null,
    questionnairesId: null,
    testNumber: null,
  },
  rules: {
    schoolName: [
      { required: true, message: "所属学校名称不能为空", trigger: "blur" },
    ],
    requestDate: [
      { required: true, message: "需求提出日期不能为空", trigger: "blur" },
    ],
  },
});

const { queryParams, form, rules } = toRefs(data);

/** 查询普测业务信息列表 */
function getList() {
  loading.value = true;
  listTestbusiness(queryParams.value).then((response) => {
    testbusinessList.value = response.rows;
    total.value = response.total;
    loading.value = false;

    // 存入 store 中
    psyBusinessStore.setBusinessList(testbusinessList.value);
  });
}

/** 去到业务详情页 */
function goToBusinessDetail(item) {
  // 获取业务数据
  psyBusinessStore.selectBusiness(item);
  $router.push("/psy/business/detail");
}

/** 初始化时加载一次普测信息列表 */
onMounted(() => {
  getList();
});
</script>

<script>
/**
 * 业务列表页
 * 负责人：唐诗轶
 */
export default {
  name: "Business",
};
</script>

<style lang="scss" scoped>
.business-card {
  cursor: pointer;
}

.business-card:active {
  transform: scale(0.98);
  transition: 0.3s;
}
</style>
